<template>
  <div class="MiniappLink">
    <BiTable
      :loading="loading"
      :data="tableData"
      size="medium"
      :column="tableColums"
    >
      <template v-slot:zip="{ row }">
        <el-button
          type="text"
          size="medium"
          :data-clipboard-text="row.link"
          class="copy"
          @click="copyText(row)"
        >复制</el-button>
      </template>
    </BiTable>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'Miniapp',
  data() {
    return {
      loading: false,
      tableData: [
        { name: '追剧', link: 'pages/bingeWatching/index' },
        { name: '剧场(首页)', link: 'pages/index/index' },
        { name: '福利', link: 'pages/welfare/index' },
        { name: '我的', link: 'pages/my/index' },
        { name: '反馈', link: 'pages/feedback/feedback' },
        { name: '排行', link: 'pages/ranking/index' },
        { name: '热门', link: 'pages/Hot/index' },
        { name: '我的订单', link: 'pages/record/index' },
        { name: '最近观看(列表)', link: 'pages/oldLook/index' },
        { name: '继续追剧页(上一次看的剧)', link: 'pages/middlePgae/index' }
        // { name: '播放页', link: 'pages/look/index' },
      ],
      tableColums: [
        {
          label: '入口名称',
          prop: 'name'
        },
        {
          label: '入口链接地址',
          prop: 'link'
        },
        {
          label: '操作',
          prop: 'zip',
          width: '180',
          slotScope: true
        }
      ]
    }
  },
  mounted() {
    this.$AccessReport.report('zhangyu-link', [this.$store.state.user.routerItem.name, '运营管理', '小程序管理'])
  },
  methods: {
    copyText() {
      const clipboard = new Clipboard('.copy')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.MiniappLink {
  width: 100%;
  height: 800px;
  padding: 20px;
  background: #fff;
}
</style>